var app3 = new Vue({
    el: '#bodye',
    data() {
        return {
            app2miandiv_p_image_color: [249, 248, 248],
            bgclow: 0
        }
    },
})
var app2 = new Vue({
    el: '#app2',
    data() {
        return {
            p: '',
            li: [1, 2, 3, 4],
            li_div: [1, 2, 3, 4, 5, 6],
            li_p: [1, 2, 3, 4, 5, 6],
            show: false,
            scroll: '',
            app2miandiv_p: [
                ['background-color: rgb(255, 0, 0,0.3);', 'background-color: rgb(225, 0, 0,0.3);', 'background-color: rgb(195, 0, 0,0.3);', 'background-color: rgb(165, 0, 0,0.2);', 'background-color: rgb(135, 0, 0,0.2);', 'background-color: rgb(105, 0, 0,0.1);'],

                ['background-color: rgb(255, 166, 0,0.6);', 'background-color: rgb(225, 156, 0,0.5);', 'background-color: rgb(195,146, 0,0.4);', 'background-color: rgb(165, 146, 0,0.3);', 'background-color: rgb(135, 136, 0,0.2);', 'background-color: rgb(105, 136, 0,0.1);'],

                ['background-color: rgb(235, 235, 0,0.6);', 'background-color: rgb(215, 215, 0,0.5);', 'background-color: rgb(195, 195, 0,0.4);', 'background-color: rgb(175, 175, 0,0.3);', 'background-color: rgb(155, 155, 0,0.2);', 'background-color: rgb(135, 135, 0,0.1);'],

                ['background-color: rgb(0, 128, 0,0.6);', 'background-color: rgb(0, 108, 30,0.5);', 'background-color: rgb(0, 88, 60,0.4);', 'background-color: rgb(0, 68, 90,0.3);', 'background-color: rgb(0, 48, 120,0.2);', 'background-color: rgb(0, 28, 120,0.1);'],

                ['background-color: rgb(0, 0, 255,0.6);', 'background-color: rgb(0, 0, 225,0.5);', 'background-color: rgb(0, 0, 195,0.4);', 'background-color: rgb(0, 0, 165,0.3);', 'background-color: rgb(0, 0, 135,0.2);', 'background-color: rgb(0, 0, 105,0.1);'],

                ['background-color: rgb(128, 0, 128,0.6);', 'background-color: rgb(128, 0, 128,0.5);', 'background-color: rgb(128, 0, 128,0.4);', 'background-color: rgb(128, 0, 128,0.3);', 'background-color: rgb(128, 0, 128,0.2);', 'background-color: rgb(128, 0, 128,0.1);']
            ],
            app2miandiv_p_colorname: [
                ['rgb(255, 0, 0,0.3);', 'rgb(225, 0, 0,0.3);', 'rgb(195, 0, 0,0.3);', 'rgb(165, 0, 0,0.2);', 'rgb(135, 0, 0,0.2);', ' rgb(105, 0, 0,0.1);'],
                ['rgb(255, 166, 0,0.6);', 'rgb(225, 156, 0,0.5);', 'rgb(195,146, 0,0.4);', 'rgb(165, 146, 0,0.3);', 'rgb(135, 136, 0,0.2);', ' rgb(105, 136, 0,0.1);'],
                ['rgb(235, 235, 0,0.6);', 'rgb(215, 215, 0,0.5);', 'rgb(195, 195, 0,0.4);', 'rgb(175, 175, 0,0.3);', 'rgb(155, 155, 0,0.2);', ' rgb(135, 135, 0,0.1);'],
                ['rgb(0, 128, 0,0.6);', 'rgb(0, 108, 30,0.5);', 'rgb(0, 88, 60,0.4);', 'rgb(0, 68, 90,0.3);', 'rgb(0, 48, 120,0.2);', ' rgb(0, 28, 120,0.1);'],
                ['rgb(0, 0, 255,0.6);', 'rgb(0, 0, 225,0.5);', 'rgb(0, 0, 195,0.4);', 'rgb(0, 0, 165,0.3);', 'rgb(0, 0, 135,0.2);', ' rgb(0, 0, 105,0.1);'],
                ['rgb(128, 0, 128,0.6);', 'rgb(128, 0, 128,0.5);', 'rgb(128, 0, 128,0.4);', 'rgb(128, 0, 128,0.3);', 'rgb(128, 0, 128,0.2);', ' rgb(128, 0, 128,0.1);']
            ],
            clickdiv: true,
            app2_bottom_template: [80, 0, 500, 333, 0, 'position: absolute;'],
            app2_bottom_divlin_3: ['absolute', 1750, 0],
            app2_bottom_divlin_3_3: [253, 400, 332, 175],
            // top: 127px; left: 122px; width: 243px; height: 300px;
            app2_bottom_divlin_3_2: [127, 122, 243, 300],
            app2_bottom_divlin_3_5: [464, 0, 460, 237],
            app2_bottom_divlin_3_1: [20, 400, 400, 200],
            app2_bottom_divlin_3_4: [253, 761, 345, 175],
            app2_bottom_divlin_3_6: [464, 494, 243, 237],
            app2_bottom_divlin_3_7: [464, 771, 449, 237],

        }
    },
    mounted() {},
    methods: {
        menu() {
            this.show = false
            app3.app2miandiv_p_image_color = [249, 248, 248]
            this.scroll = document.documentElement.scrollTop || document.body.scrollTop;
            let flag = Math.trunc(this.scroll / 10)
            console.log(flag);
            if (flag >= 245) {
                $(".app2-main-jieshi").stop().fadeIn(1000, function () {});
                console.log(26666);
            } else if (flag < 245) {
                $(".app2-main-jieshi").stop().fadeOut(1000, function () {});
            }
            // $(".main-color-box-div-div").stop().slideDown(1000, function () {});
            if (flag >= 201) {
                for (let i = 0; i < 3; i++) {
                    // 157, 169, 226
                    app3.app2miandiv_p_image_color[i] -= (flag - 201) * 2
                    if (app3.app2miandiv_p_image_color[0] < 157) {
                        app3.app2miandiv_p_image_color[0] = 157
                    }
                    if (app3.app2miandiv_p_image_color[1] < 169) {
                        app3.app2miandiv_p_image_color[1] = 169
                    }
                    if (app3.app2miandiv_p_image_color[2] < 226) {
                        app3.app2miandiv_p_image_color[2] = 226
                    }
                }

            }
            if (flag >= 250 && this.clickdiv) {
                // console.log(2222222);
                $("#app2-main-bottom").stop().fadeIn(1000, function () {});
            }
            this.app2_bottom_template = [80, 0, 500, 333, 0]
            // console.log(app3.app2miandiv_p_image_color);
            if (flag >= 376) {
                // this.app2_bottom_template[0]+=(flag-376)*7
                // this.app2_bottom_template[1]+=(flag-376)*10
                this.app2_bottom_template[2] += (flag - 376) * 6.2
                this.app2_bottom_template[3] += (flag - 376) * 3
                this.app2_bottom_template[4] += (flag - 376) / 5
                if (this.app2_bottom_template[0] > 1000) {
                    this.app2_bottom_template[0] = 1000
                }
                if (this.app2_bottom_template[2] > 1200) {
                    this.app2_bottom_template[2] = 1200
                }
                if (this.app2_bottom_template[3] > 665) {
                    this.app2_bottom_template[3] = 665
                }
                if (this.app2_bottom_template[4] > 25) {
                    this.app2_bottom_template[4] = 25
                }

                for (let i = 0; i < 3; i++) {
                    // 157, 169, 226
                    app3.app2miandiv_p_image_color[i] += (flag - 376) * 2
                    // 249, 248, 248
                    if (app3.app2miandiv_p_image_color[0] > 246) {
                        app3.app2miandiv_p_image_color[0] = 246
                    }
                    if (app3.app2miandiv_p_image_color[1] > 248) {
                        app3.app2miandiv_p_image_color[1] = 248
                    }
                    if (app3.app2miandiv_p_image_color[2] > 248) {
                        app3.app2miandiv_p_image_color[2] = 248
                    }
                }
                // for(let i=0;i<3;i++) {
                //     // 157, 169, 226
                //     app3.app2miandiv_p_image_color[i]-=(flag-376)*5
                //     // 249, 248, 248
                //     if(app3.app2miandiv_p_image_color[0]<0) {
                //         app3.app2miandiv_p_image_color[0]=0
                //     }
                //     if(app3.app2miandiv_p_image_color[1]<0) {
                //         app3.app2miandiv_p_image_color[1]=0
                //     }
                //     if(app3.app2miandiv_p_image_color[2]<0) {
                //         app3.app2miandiv_p_image_color[2]=0
                //     }
                // }


            }
            if (flag >= 408) {
                this.app2_bottom_template[5] = 'position: fixed;'
                this.app2_bottom_template[0] = 30
                this.app2_bottom_template[1] = 162
            }
            if (flag > 492) {
                this.app2_bottom_template[5] = 'position: absolute;'
                this.app2_bottom_template[0] = 900
                this.app2_bottom_template[1] = 0
            }
            if (flag > 600) {
                $(".app2-bottom-div-div1").animate({
                    width: '700px'
                }, 1000);
            }
            // if(flag<500){
            //     $(".app2-bottom-div-div1").animate({
            //         width: '0px'
            //     }, 1000);
            // }
            if (flag > 620) {
                $(".app2-bottom-div-div2").animate({
                    width: '700px'
                }, 1000);
            }
            if (flag > 640) {
                $(".app2-bottom-div-div3").animate({
                    width: '700px'
                }, 1000);
            }
            if (flag > 660) {
                $(".app2-bottom-div-div4").animate({
                    width: '700px'
                }, 1000);
            }
            this.app2_bottom_divlin_3 = ['absolute', 1750, 0]
            this.app2_bottom_divlin_3_3 = [253, 400, 332, 175]
            this.app2_bottom_divlin_3_2 = [127, 122, 243, 300]
            this.app2_bottom_divlin_3_5 = [464, 0, 460, 237]
            this.app2_bottom_divlin_3_1 = [20, 400, 400, 200]
            this.app2_bottom_divlin_3_4 = [253, 761, 345, 175]
            this.app2_bottom_divlin_3_6 = [464, 494, 243, 237]
            this.app2_bottom_divlin_3_7 = [464, 771, 449, 237]
            if (flag >= 745) {

                this.app2_bottom_divlin_3[0] = 'fixed'
                this.app2_bottom_divlin_3[1] = 5
                this.app2_bottom_divlin_3[2] = 160

                this.app2_bottom_divlin_3_3[0] -= (flag - 745) * 4
                this.app2_bottom_divlin_3_3[1] -= (flag - 745) * 9
                this.app2_bottom_divlin_3_3[2] += (flag - 745) * 18
                this.app2_bottom_divlin_3_3[3] += (flag - 745) * 8

                this.app2_bottom_divlin_3_2[0] -= (flag - 745) * 13
                this.app2_bottom_divlin_3_2[1] -= (flag - 745) * 30
                this.app2_bottom_divlin_3_2[2] += (flag - 745) * 15
                this.app2_bottom_divlin_3_2[3] += (flag - 745) * 20

                this.app2_bottom_divlin_3_5[0] += (flag - 745) * 11
                this.app2_bottom_divlin_3_5[1] -= (flag - 745) * 25
                this.app2_bottom_divlin_3_5[2] += (flag - 745) * 15
                this.app2_bottom_divlin_3_5[3] += (flag - 745) * 20

                this.app2_bottom_divlin_3_1[0] -= (flag - 745) * 30
                this.app2_bottom_divlin_3_1[1] -= (flag - 745) * 14
                this.app2_bottom_divlin_3_1[2] += (flag - 745) * 28
                this.app2_bottom_divlin_3_1[3] += (flag - 745) * 20

                this.app2_bottom_divlin_3_4[0] -= (flag - 745) * 10
                this.app2_bottom_divlin_3_4[1] += (flag - 745) * 14
                this.app2_bottom_divlin_3_4[2] += (flag - 745) * 28
                this.app2_bottom_divlin_3_4[3] += (flag - 745) * 20

                this.app2_bottom_divlin_3_6[0] += (flag - 745) * 8
                this.app2_bottom_divlin_3_6[1] -= (flag - 745) * 7
                this.app2_bottom_divlin_3_6[2] += (flag - 745) * 14
                this.app2_bottom_divlin_3_6[3] += (flag - 745) * 16
                // top: 127px;
                // left: 122px;
                // width: 243px;
                // height: 300px;
                this.app2_bottom_divlin_3_7[0] += (flag - 745) * 15
                this.app2_bottom_divlin_3_7[1] += (flag - 745) * 17
                this.app2_bottom_divlin_3_7[2] += (flag - 745) * 17
                this.app2_bottom_divlin_3_7[3] += (flag - 745) * 30
            }
            if(flag>840) {
                $(".app2-bottom-divlin-4").stop().fadeIn(200, function () {});
            }
            if(flag<820) {
                $(".app2-bottom-divlin-4").stop().fadeOut(10, function () {});
            }
            this.show = true
        },
        sectinoDiv1() {
            this.show = false
            // console.log(3333);
            for (let i = 0; i < 6; i++) {
                if (i === 0) {
                    $("#app2-mian-div" + i + "").stop().fadeIn(1000, function () {});
                } else {
                    $("#app2-mian-div" + i + "").stop().fadeOut(1000, function () {});
                }
            }
            $("#app2-main-bottom").stop().fadeOut(1000, function () {});
            this.clickdiv = false
            this.show = true
        },
        sectinoDiv2() {
            this.show = false
            // console.log(3333);
            for (let i = 0; i < 6; i++) {
                if (i === 1) {
                    $("#app2-mian-div" + i + "").stop().fadeIn(1000, function () {});
                } else {
                    $("#app2-mian-div" + i + "").stop().fadeOut(1000, function () {});
                }
            }
            $("#app2-main-bottom").stop().fadeOut(1000, function () {});
            this.clickdiv = false
            this.show = true
        },
        sectinoDiv3() {
            this.show = false
            // console.log(3333);
            for (let i = 0; i < 6; i++) {
                if (i === 2) {
                    $("#app2-mian-div" + i + "").stop().fadeIn(1000, function () {});
                } else {
                    $("#app2-mian-div" + i + "").stop().fadeOut(1000, function () {});
                }
            }
            $("#app2-main-bottom").stop().fadeOut(1000, function () {});
            this.clickdiv = false
            this.show = true
        },
        sectinoDiv4() {
            this.show = false
            // console.log(3333);
            for (let i = 0; i < 6; i++) {
                if (i === 3) {
                    $("#app2-mian-div" + i + "").stop().fadeIn(1000, function () {});
                } else {
                    $("#app2-mian-div" + i + "").stop().fadeOut(1000, function () {});
                }
            }
            $("#app2-main-bottom").stop().fadeOut(1000, function () {});
            this.clickdiv = false
            this.show = true
        },
        sectinoDiv5() {
            this.show = false
            // console.log(3333);
            for (let i = 0; i < 6; i++) {
                if (i === 4) {
                    $("#app2-mian-div" + i + "").stop().fadeIn(1000, function () {});
                } else {
                    $("#app2-mian-div" + i + "").stop().fadeOut(1000, function () {});
                }
            }
            $("#app2-main-bottom").stop().fadeOut(1000, function () {});
            this.clickdiv = false
            this.show = true
        },
        sectinoDiv6() {
            this.show = false
            // console.log(3333);
            for (let i = 0; i < 6; i++) {
                if (i === 5) {
                    $("#app2-mian-div" + i + "").stop().fadeIn(1000, function () {});
                } else {
                    $("#app2-mian-div" + i + "").stop().fadeOut(1000, function () {});
                }
            }
            $("#app2-main-bottom").stop().fadeOut(1000, function () {});
            this.clickdiv = false
            this.show = true
        }
    }
})